<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
  minimum-scale=1.0,maximum-scale=1.0, user-scalable=no viewport-fit=cover">
  <title>展示</title>
</head>
<body>
  <div id="demo1"></div>
  <style id="demo2">
    .skin *{box-sizing: border-box;margin: 0;padding: 0;}
    .skin *::before,*::after{
      box-sizing: border-box;
    }
    @keyframes noseWave {
      0%{transform: rotate(0deg);}
      20%{transform: rotate(10deg);}
      40%{transform: rotate(-10deg);}
      60%{transform: rotate(5deg);}
      80%{transform: rotate(-5deg);}
      90%{transform: rotate(0deg);}
      100%{transform: rotate(0deg);}
    }
    .nose:hover{
      transform-origin: 50% 100%;
      animation:noseWave 800ms infinite;
    }
  </style>
  <div id="buttons">
    <button class="button" id="play" style="display: none;">播放</button>
    <button class="button" id="stop">暂停</button>
    <button class="button" id="quick">加速</button>
    <button class="button" id="slow">减速</button>
    <button class="button" id="speed"></button>
  </div>
  <div id="html">
    <div class="skin">
      <div class="move">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose"></div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="mouth">
          <div class="up">
            <div class="lip left"></div>
            <div class="lip right"></div>
          </div>
          <div class="down">
            <div class="yuan1">
              <div class="yuan2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    #demo2{
      display: none;
    }
    #demo1::-webkit-scrollbar{/* 使用伪类隐藏滚动条 */
      display: none;
    }
    #demo1{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 50vh;
      overflow: hidden;
      overflow-y: auto;
    }
    #html{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50vh;
    }
    #buttons{
      position: fixed;
      right: 2vh;
      top:5vh;
      height: 150px;
      display: flex;
      flex-direction:column;
      justify-content: space-between;
    }
    .button{
      width: 80px;
      font-size: 1em;
      padding:4px 8px;
      border: 1px solid rgb(185, 182, 182);
      cursor:pointer;
      border-radius: 10px;
      overflow: hidden;
      white-space: nowrap;
    }
    #stop{
      background-color:rgb(252, 69, 69);
    }
    #play{
      background-color:rgb(155, 155, 252);
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="test.js" type="module"></script>
</body>
</html>